<template>
  <div class="chart-dashboard-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>图表展示</span>
          <div class="filter-bar">
            <el-select v-model="selectedSource" placeholder="选择数据源" size="small" style="width: 150px;">
              <el-option v-for="s in sources" :key="s" :label="s" :value="s" />
            </el-select>
            <el-select v-model="chartType" placeholder="图表类型" size="small" style="width: 150px;">
              <el-option label="柱状图" value="bar" />
              <el-option label="折线图" value="line" />
              <el-option label="堆叠图" value="stack" />
            </el-select>
            <el-button type="primary" size="small" @click="loadData">加载数据</el-button>
            <el-button size="small" @click="exportAllCharts">导出全部图表</el-button>
            <el-button size="small" @click="printCharts">打印图表</el-button>
          </div>
        </div>
      </template>

      <div ref="printArea">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card>
              <div class="chart-title">模型使用</div>
              <div ref="barChart" class="chart-container"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div class="chart-title">命中趋势</div>
              <div ref="lineChart" class="chart-container"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div class="chart-title">来源占比</div>
              <div ref="pieChart" class="chart-container"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const selectedSource = ref('平台推荐')
const chartType = ref('bar')
const sources = ['平台推荐', '用户上传', '外部接口']
const printArea = ref(null)

// DOM refs
const barChart = ref(null)
const lineChart = ref(null)
const pieChart = ref(null)

let barInstance = null
let lineInstance = null
let pieInstance = null

const usageData = ref([])
const trendData = ref([])
const pieData = ref([])

function loadData() {
  usageData.value = [Math.random()*40+10, Math.random()*30+10, Math.random()*25+10, Math.random()*35+10]
  trendData.value = Array(5).fill(0).map(() => (Math.random()*0.2+0.75).toFixed(2))
  pieData.value = [
    { value: Math.floor(Math.random()*60 + 20), name: '平台推荐' },
    { value: Math.floor(Math.random()*30 + 10), name: '用户上传' },
    { value: Math.floor(Math.random()*20), name: '外部接口' }
  ]
  renderCharts()
}

function renderCharts() {
  // 图表实例
  barInstance = echarts.init(barChart.value)
  lineInstance = echarts.init(lineChart.value)
  pieInstance = echarts.init(pieChart.value)

  // 柱状/折线/堆叠
  barInstance.setOption({
    title: { text: '模型使用统计', left: 'center' },
    tooltip: {},
    xAxis: { data: ['MLP', 'CART', 'SVM', 'XGBoost'] },
    yAxis: {},
    series: [{
      type: chartType.value === 'stack' ? 'bar' : chartType.value,
      stack: chartType.value === 'stack' ? 'total' : undefined,
      data: usageData.value,
      itemStyle: { color: '#1890FF' }
    }]
  })

  lineInstance.setOption({
    title: { text: '模型命中率趋势', left: 'center' },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
    yAxis: { type: 'value' },
    series: [{
      type: chartType.value === 'stack' ? 'line' : chartType.value,
      stack: chartType.value === 'stack' ? '合计' : undefined,
      data: trendData.value,
      smooth: true,
      lineStyle: { color: '#52C41A' }
    }]
  })

  pieInstance.setOption({
    title: { text: '模型来源占比', left: 'center' },
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: '60%',
      data: pieData.value,
      label: { formatter: '{b}: {d}%' }
    }]
  })
}

function exportAllCharts() {
  const charts = [barInstance, lineInstance, pieInstance]
  charts.forEach((chart, index) => {
    const url = chart.getDataURL({ type: 'png' })
    const a = document.createElement('a')
    a.href = url
    a.download = `chart-${index + 1}.png`
    a.click()
  })
}

function printCharts() {
  const content = printArea.value.innerHTML
  const printWindow = window.open('', '_blank')
  printWindow.document.write(`
    <html>
      <head><title>打印图表</title></head>
      <body>${content}</body>
    </html>
  `)
  printWindow.document.close()
  printWindow.focus()
  printWindow.print()
  printWindow.close()
}

onMounted(() => {
  nextTick(() => {
    loadData()
  })
})
</script>

<style scoped>
.chart-dashboard-page {
  padding: 10px;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chart-container {
  width: 100%;
  height: 260px;
}
.chart-title {
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
